<template>
    <div>
        <h1>收货地址管理 {{ id }}</h1>

        <!-- 不用栅格系统了，因为我们这个要flex -->
        <div class="row">
            <!-- 循环收货地址 -->
            <div class="col" v-for="(item, index) in addressArr" :key="index">
                <!-- 卡片 -->
                <el-card>
                    <!-- 卡片头部 -->
                    <div slot="header" class="cardheader">
                        <span><b>{{ item.alias }}</b></span>

                        <div style="margin-left: auto">
                            <a href="javascript:;" @click="updateAClick(index)">修改</a>
                            <el-popconfirm title="确定要删除这条地址么？" @confirm="delAddress(index)">
                                <a href="javascript:;" slot="reference">删除</a>
                            </el-popconfirm>
                            
                        </div>
                    </div>

                    <!-- 卡片身体 -->
                    <p>省市县镇：{{ item.p }}{{ item.c }}{{ item.a }}{{ item.s }}</p>
                    <p>街道门牌号：{{ item.d }}</p>
                    <p>收件人：{{ item.n }}</p>
                    <p>联系电话：{{ item.tel }}</p>
                </el-card>
            </div>

            <!-- 加号那个card -->
            <div class="col plus_col" v-if="addressArr.length < 4">
                <el-card>
                    <i class="el-icon-circle-plus plus" @click="addBtn"></i>
                </el-card>
            </div>
        </div>

        <!-- 弹出层，对话框 -->
        <el-dialog :visible="showDialog" :title="dialogType + '用户'" @close="showDialog = false">
            <!-- 内部组件 -->
            <!-- defaultData就是当前正在修改的数据 -->
            <UserAddUpdateDialogInn v-if="showDialog" ref="UserAddUpdateDialogInn"
                :defaultData="addressArr[nowUpdateIndex]" :dialogType="dialogType" />

            <!-- 脚 -->
            <div slot="footer">
                <el-button type="success" @click="dialogOKBtn">
                    {{ dialogType }}地址
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getShdz, addShdz, updateShdz, delShdz } from "@/api/user.js";
import UserAddUpdateDialogInn from "./UserAddUpdateDialogInn.vue";

export default {
    components: {
        UserAddUpdateDialogInn
    },
    created() {
        // 得到路由中的id
        this.id = this.$route.query.id;

        // 拉取数据
        this.loadData();
    },
    data() {
        return {
            id: 0,
            // 地址数组
            addressArr: [],
            // 显示弹出层
            showDialog: false,
            // 弹出层类型，增加，修改
            dialogType: '增加',
            // 当前正在修改哪项？下标，从0开始
            nowUpdateIndex: 0
        };
    },
    methods: {
        // 点击修改
        updateAClick(idx) {
            this.dialogType = '修改';
            this.showDialog = true;
            // 正在更改的序号
            this.nowUpdateIndex = idx;
        },
        // 点击加号
        addBtn() {
            this.dialogType = '增加';
            this.showDialog = true;
        },
        // 点击弹出层的确定按钮
        dialogOKBtn() {
            // 校验全表
            this.$refs.UserAddUpdateDialogInn.$refs.myform.validate((isOK) => {
                if (isOK) {
                    // alert('校验通过')
                    // 捞取数据
                    const { p, c, a, s, d, n, tel, alias } = this.$refs.UserAddUpdateDialogInn.$data.myform;

                    // console.log(p, c, a, s, d, n, tel, alias);
                    // 发Ajax
                    if (this.dialogType == '增加') {
                        addShdz({
                            id: this.id,
                            p,
                            c,
                            a,
                            s,
                            d,
                            n,
                            tel,
                            alias
                        }).then(data => {
                            if (data == '添加成功') {
                                this.$message.success('添加成功');

                                // 关闭弹出层
                                this.showDialog = false;
                                // 请求数据
                                this.loadData();
                            }
                        });
                    } else {
                        updateShdz({
                            index: this.nowUpdateIndex,
                            id: this.id,
                            p,
                            c,
                            a,
                            s,
                            d,
                            n,
                            tel,
                            alias
                        }).then(data => {
                            if (data == '修改成功') {
                                this.$message.success('修改成功');

                                // 关闭弹出层
                                this.showDialog = false;
                                // 请求数据
                                this.loadData();
                            }
                        });
                    }
                }
            });
        },
        // 拉取数据
        async loadData() {
            // 查询收货地址
            const res = await getShdz(this.id);

            // console.log(res);
            this.addressArr = res;
        },
        // 删除收货地址
        async delAddress(index) {
            const res = await delShdz({
                id: this.id,
                index
            });
            
            if (res == '删除成功') {
                this.$message.success('删除成功了，恭喜');
                // 刷新
                this.loadData();
            }
        }
    },
};
</script>

<style lang="less">
.row {
    display: flex;

    .col {
        width: 25%;
        margin-right: 10px;
        height: 260px;

        // 最后一个col，就去掉margin-right
        &:last-child {
            margin-right: 0;
        }

        .el-card__header {
            padding: 13px;
        }

        .cardheader {
            height: 20px;
            display: flex;

            a {
                padding-left: 10px;
            }
        }

        .el-card {
            height: 100%;
        }

        // 最后一个加号
        &.plus_col .el-card {
            height: 100%;
            position: relative;

            .plus {
                // 那个加号是一个文字，所以用字体可以设置字号。
                font-size: 80px;
                color: rgb(235, 122, 180);
                position: absolute;
                top: 50%;
                left: 50%;
                // 拉回自己一半
                transform: translate(-50%, -50%);
                // 小手
                cursor: pointer;
                // 过渡
                transition: all .4s;

                // 当card被hover的时候，这个plus
                &:hover {
                    color: rgb(221, 207, 56);
                }
            }


        }
    }
}
</style>